<template>
    <el-card class="page">

        <!-- 标题 -->
        <template #header>
            <div class="header">
                <span>员工管理</span>
                <div>
                    <el-button type="primary" @click="visibleDrawer = true, clearStaffInfo()">注册员工</el-button>
                </div>
            </div>
        </template>


        <!-- 搜索表单 inline:一行显示 -->
        <el-form inline>
            <!-- 文章分类 -->
            <el-form-item label="员工检索：">
                <!-- 文章分类的下拉框 -->
                <el-input placeholder="用户名/账号/手机号" style="width: 200px;" v-model="queryInput"></el-input>
            </el-form-item>

            <!-- 搜索按钮 -->
            <el-form-item>
                <el-button type="primary" @click="getUsers">搜索</el-button>
                <el-button @click="queryInput = ''">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 文章列表 -->
        <!-- 使用el-table 组件来展示文章列表。利用ele渲染表格，不需要直接使用 v-for 指令来遍历数据 -->
        <!-- prop 属性指定了数据对象中对应的字段，el-table就知道如何从 articles 中提取和显示数据。 -->
        <el-table style="width: 100%;" :data="staff" stripe>
            <el-table-column label="用户名" prop="name"></el-table-column>
            <el-table-column label="账号" prop="account"></el-table-column>
            <el-table-column label="密码" prop="password"></el-table-column>
            <el-table-column label="性别" prop="sex"></el-table-column>
            <el-table-column label="联系方式" prop="phone"></el-table-column>



            <!-- 操作按钮 -->
            <!-- circle:按钮变圆形 -->
            <!-- plain：按钮是朴素的样式。透明背景，只有边框 -->
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialogData(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="open(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>


        <!-- 分页 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, pager, next" @current-change="onCurrentChange" @size-change="onSizeChange"
            :total="total" background style="margin-top: 20px;justify-content: flex-end;" />



        <!-- 搭建抽屉组件 -->
        <el-drawer v-model="visibleDrawer" title="注册员工" size="40%">
            <!-- 添加文章表单 -->
            <!-- label-width 定义所有表单标签 el-form-item 的宽度 -->
            <el-form :model="staffInfo" label-width="100px" :rules="rules">

                <el-form-item label="名称" prop="name">
                    <el-input v-model="staffInfo.name" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item label="账号" prop="account">
                    <el-input v-model="staffInfo.account" placeholder="请输入账号"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" show-password v-model="staffInfo.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="staffInfo.sex">
                        <el-radio-button label="男" value="男" />
                        <el-radio-button label="女" value="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model="staffInfo.phone" placeholder="请输入联系方式" minlength="11" maxlength="11"></el-input>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" plain @click="registerStaff">注册</el-button>
                </el-form-item>


                <img src="../../images/addManager-01.gif" width="150px" height="150px"
                    style="padding: 8px 10px; border: 1px dashed #4e6ef2;margin-left: 200px;margin-top: 100px;border-radius: 8px;">
            </el-form>
        </el-drawer>

        <el-dialog v-model="dialogFormVisible" title="修改员工信息" width="600" style="margin-top: 170px;">
            <el-form :model="staffInfo" label-width="100px" :rules="rules">

                <el-form-item label="名称" prop="name">
                    <el-input v-model="staffInfo.name"></el-input>
                </el-form-item>

                <el-form-item label="账号" prop="account">
                    <el-input v-model="staffInfo.account"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input type="password" show-password v-model="staffInfo.password"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="staffInfo.sex">
                        <el-radio-button label="男" value="男" />
                        <el-radio-button label="女" value="女" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="联系方式" prop="phone">
                    <el-input v-model.number="staffInfo.phone" placeholder="请输入联系方式" minlength="11"
                        maxlength="11"></el-input>
                </el-form-item>

            </el-form>
            <template #footer>
                <div>
                    <el-button @click="dialogFormVisible = false, clearStaffInfo()">取消修改</el-button>
                    <el-button type="primary" @click="updateStaff">确认修改</el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import { ref } from 'vue';
import managerApi from '@/api/manager';
import { Edit, Delete, } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//检索数据
const queryInput = ref('');

const dialogFormVisible = ref(false)

//员工数据
const staff = ref([]);

//添加数据
const staffInfo = ref({
    name: '',
    account: '',
    password: '',
    sex: '男',
    phone: '',
})

//分页数据模型
const pageNum = ref(1); //当前页
const pageSize = ref(5);//每页条数
const total = ref(10)   //总条数

//每页条数发生变化，自动调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    getUsers()
}

//页码发生变化，自动调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    getUsers()
}

//查询所有用户信息
const getUsers = async () => {
    //传递参数
    let data = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        queryInput: queryInput.value ? queryInput.value : null,

    }
    const res = await managerApi.managerAllStaff(data)
    if (res.data.code == 0) {
        //条数
        total.value = res.data.data.total
        //数据
        staff.value = res.data.data.records
    }
}
//自调用
getUsers();

//清除数据模型
const clearStaffInfo = () => {
    staffInfo.value = {
        name: '',
        account: '',
        password: '',
        sex: '男',
        phone: '',
    }
}
//添加员工
const registerStaff = async () => {

    //校验手机号是否符合格式
    const phoneRegex = /^1[3456789]\d{9}$/;
    if (!phoneRegex.test(staffInfo.value.phone)) {
        ElMessage.error("手机号格式不正确！")
        return
    }

    const res = await managerApi.managerAddStaff(staffInfo.value)
    console.log(res.data)
    if (res.data.code == 0) {
        ElMessage.success("添加成功")
        visibleDrawer.value = false
        clearStaffInfo()
        //刷新列表
        getUsers()
    } else {
        ElMessage.error(res.data.message)
    }
}


const showDialogData = (row) => {
    //数据添加id
    staffInfo.value.name = row.name
    staffInfo.value.account = row.account
    staffInfo.value.password = row.password
    staffInfo.value.sex = row.sex
    staffInfo.value.phone = row.phone
    //添加id
    staffInfo.value.id = row.id
    dialogFormVisible.value = true
}

//修改员工信息
const updateStaff = async () => {

    //校验手机号是否符合格式
    const phoneRegex = /^1[3456789]\d{9}$/;
    if (!phoneRegex.test(staffInfo.value.phone)) {
        ElMessage.error("手机号格式不正确！")
        return
    }

    //修改员工信息
    const res = await managerApi.managerUpdateStaff(staffInfo.value)
    if (res.data.code == 0) {
        ElMessage.success("修改成功")
        dialogFormVisible.value = false
        clearStaffInfo()
        //刷新列表
        getUsers()
    } else {
        ElMessage.error(res.data.message)
    }
}

//表单参数校验
const rules = {
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        {
            pattern: /^\S{1,10}$/,
            message: '名称必须是1-10为的非空字符',
            trigger: 'blur'
        }
    ],
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        {
            pattern: /^\S{5,10}$/,
            message: '账号必须是5-10为的非空字符',
            trigger: 'blur'
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^\S{5,10}$/, message: '密码必须是5-10为的非空字符', trigger: 'blur' }
    ],
    phone: [
        { required: true, message: '请输入联系方式', trigger: 'blur' },
        {
            pattern: /^\d{11}$/,
            message: '联系方式必须是11位数字',
            trigger: 'blur'
        }
    ]
}
const open = (info) => {
    ElMessageBox.confirm(
        '删除为不可逆操作,请确认！',
        '提示',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            //删除员工函数回调
            deleteStaff(info)
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '以取消操作',
            })
        })
}

//id对象  
const data = ref({
    id:""
})

//删除员工
const deleteStaff = async (info) => {
    data.value.id = info.id
    const res = await managerApi.managerDeleteStaff(data.value)
    console.log(res)
    if (res.data.code == 0) {
        ElMessage.success("删除成功")
        //刷新列表
        getUsers()
    } else {
        ElMessage.error(res.data.message)
    }
}


</script>

<style scoped>
.page {
    min-height: 100%;
    box-sizing: border-box;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>